<template>
  <section style="width:1000px; margin:20px auto;" class="contianer">
    <el-row :gutter="20" class="detai">
      <el-col :span="17">
        <div class="left">
          <!-- 面包屑导航 -->
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
              <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!-- 文章详情 -->
          <div class="post">
            <h2>{{postData.title}}</h2>
            <div class="time">攻略：2019-05-22 10:57 阅读：10219</div>
            <div class="content" v-html="postData.content"></div>
            <div class="icon">
              <div class="icon-item">
                <i class="el-icon-edit-outline"></i>
                <span>评论({{commentData.total}})</span>
              </div>
              <div class="icon-item">
                <i class="el-icon-star-off" @click="star"></i>
                <span>收藏</span>
              </div>
              <div class="icon-item">
                <i class="el-icon-share"></i>
                <span>分享</span>
              </div>
              <div class="icon-item">
                <i class="el-icon-thumb" @click="likes"></i>
                <span>点赞({{postData.like}})</span>
              </div>
            </div>
          </div>
          <!-- 评论 -->
          <div class="comment">
            <h3>评论</h3>
            <div id="huifu">
              <!-- 弹框消息提示 -->
                <el-alert :title="`回复 @ ${nickname}` " type="info" effect="dark" :class="{active:isShow}"></el-alert> 
              <!-- 文本域 -->
              <textarea
                name="text"
                id="text"
                cols="30"
                v-model="form.content"
                rows="10"
                placeholder="说点什么吧..."
              ></textarea>
              <!-- 上传图片 -->
              <!-- action文件上传的接口地址 on-remove文件列表移除文件时的钩子 file-list显示已上传文件列表
              on-success上传成功后的钩子函数-->
              <div class="case">
                <el-upload
                  name="files"
                  :file-list="form.imges"
                  :action="$axios.defaults.baseURL +'/upload'"
                  list-type="picture-card"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
                <button class="btn" @click="addComment">提交</button>
              </div>
            </div>
          </div>
          <!-- 评论组件 -->
          <div class="commentFoor">
            <PostComment
              v-for="(item,index) in commentData.data"
              :key="index"
              :data="item"
              @reply="reply"
            />
          </div>
          <el-row type="flex" justify="center" style="margin-top:10px;">
            <!-- size-change：切换条数时候触发 -->
            <!-- current-change：选择页数时候触发 -->
            <!-- current-page: 当前页数 -->
            <!-- page-size：当前条数 -->
            <!-- total：总条数 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[2,4, 6, 8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="commentData.total"
            ></el-pagination>
          </el-row>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="right">
          <div class="title">相关攻略</div>
          <div
            class="postMessage"
            v-for="(item,index) in recommend"
            :key="index"
            @click="$router.push({path:'/post/detai',query:{id:item.id}})"
          >
            <img
              v-if="item.images.length==0"
              src="http://157.122.54.189:9095/assets/images/avatar.jpg"
              alt
            />
            <img v-else :src="item.images[0]" alt />
            <div class="text">
              <div class="postTilte">{{item.title}}</div>
              <div class="textBottom">
                <span class="time">2019-09-12 9:14</span>
                阅读&nbsp;{{item.watch}}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import PostComment from "@/components/post/postComment";
export default {
  components: {
    PostComment
  },
  data() {
    return {
      isShow:false,//用来显示消息提示
      dialogImageUrl: "",
      dialogVisible: false,
      postData: {}, //文章详情数据
      pageSize: 2,
      pageIndex: 1,
      form: {
        //评论数据
        content: "",
        imges: [],
        follow: ""
      },
      nickname:'',//子组件传回的昵称
      recommend: [], //推荐文章数据
      commentData: {}, //评论数据
      postId: 0 //文章id
    };
  },
  mounted() {
    // 获取文章详情
    this.getPostData();
    // 获取推荐文章
    this.$axios({
      url: "/posts/recommend",
      params: {
        id: this.$route.query.id
      }
    }).then(res => {
      // console.log(res.data)
      this.recommend = res.data.data;
    });

    // 获取文章评论
    this.getCommentList();
  },

  watch: {
    // 监听路由变化来获取文章详情
    $route() {
      this.getPostData();
    }
  },
  methods: {
    // 收藏
    star(){
       this.$axios({
        url:'/posts/star',
        params:{
          id:this.$route.query.id
        },
         headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token || "NO TOKEN"}`
        }
      }).then(res=>{
        // console.log(res)
        if(res.status==200){
          this.$message(res.data.message)
        }
      })
    },
    // 点赞
    likes(){
      this.$axios({
        url:'/posts/like',
        params:{
          id:this.$route.query.id
        },
         headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token || "NO TOKEN"}`
        }
      }).then(res=>{
        // console.log(res.data)
        if(res.status==200){
          this.postData.like+=1;
          this.$message(res.data.message);
        }
      })
    },
    // 接收子组件传送的数据
    reply(follow) {
      // console.log(follow)
      this.form.follow = follow.id;
      this.nickname=follow.nickname;
      this.isShow=true;
    },
    // 获取文章详情
    getPostData() {   
      this.postId = this.$route.query.id;
      this.$axios({
        url: "/posts",
        params: {
          id: this.postId
        }
      }).then(res => {
        this.postData = res.data.data[0];
        console.log(res.data.data)
      });
    },
    // 获取文章评论
    getCommentList() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id, //文章id
          _start: (this.pageIndex - 1) * this.pageSize, //开始的index
          _limit: this.pageSize //条数
        }
      }).then(res => {
        // console.log(res.data);
        this.commentData = res.data;
      });
    },
    // 添加评论
    addComment() {
      this.$axios({
        url: "/comments",
        method: "post",
        data: {
          content: this.form.content,
          pics: this.form.imges,
          post: this.$route.query.id,
          follow: this.form.follow
        },
        headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token ||
            "NO TOKEN"}`
        }
      }).then(res => {
        // console.log(res.data.message);
        if (res.data.message == "提交成功") {
          this.isShow=false;
          this.$message("提交成功");
          this.form={content: "",imges: [],follow: ""}
        }
      });
    },
    // 获取页面评论的条数
    handleSizeChange(pageSize) {
      // 页面条数变化
      this.pageSize = pageSize;
      this.getCommentList();
    },
    // 获取页面的页码
    handleCurrentChange(pageIndex) {
      // 页面数据变化
      this.pageIndex = pageIndex;
      this.getCommentList();
    },
    // 删除图片
    handleRemove(file, fileList) {
      // file图片删除的那张图片，fileList剩余的图片
      this.form.imges = fileList;
    },
    // 添加成功图片
    handleSuccess(res) {
      // console.log(res[0])
      this.form.imges.push(res[0]);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}
 /deep/ .el-alert {
   width: 200px;
   display: none;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
   margin:5px 0;
      background-color: #f4f4f5;
      color: #9093b1;
      .el-alert__closebtn{
        color:#666;
      }
      &.active{
        display: block;
      }
    }
.left {
  .post {
    h2 {
      padding: 18px 0;
      border-bottom: 1px solid #dddddd;
    }
    .time {
      display: flex;
      justify-content: flex-end;
      color: #999999;
      padding: 20px 10px;
    }

   

    .content {
      color: #333;
      margin-bottom: 50px;
      /deep/ img {
        max-width: 100%;
        object-fit: cover;
      }
    }
    .icon {
      display: flex;
      width: 380px;
      justify-content: space-around;
      margin: 0px auto 20px;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        /deep/ i {
          color: #ffa500;
          font-size: 40px;
          cursor: pointer;
        }
        span {
          padding-top: 10px;
          color: #99a6c4;
          font-size: 14px;
        }
      }
    }
  }
  .comment {
    h3 {
      font-size: 20px;
      font-weight: normal;
      padding: 20px 0;
    }
    #text {
      resize: none;
      width: 100%;
      height: 40px;
      border: 1px solid #dcdfe6;
      padding: 8px 10px;
      &::-webkit-input-placeholder {
        color: #c0c4cc;
      }
    }
    .case {
      display: flex;
      justify-content: space-between;
      .btn {
        height: 30px;
        line-height: 30px;
        background-color: #409eff;
        color: #fff;
        border: none;
        padding: 0 16px;
        font-size: 14px;
        border-radius: 5px;
      }
    }
  }
  .commentFoor {
    border: 1px solid #e1e1e1;
    margin: 20px auto;
  }
}
.right {
  .title {
    color: #333;
    font-size: 20px;
    padding: 10px 0px;
    border-bottom: 1px solid #e3e3e3;
  }
  .postMessage {
    color: #333;
    display: flex;
    padding: 18px 0;
    border-bottom: 1px solid #e3e3e3;
    img {
      object-fit: cover;
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .textBottom {
        font-size: 12px;
        color: #b5a3b1;
      }
    }
  }
}
</style>